<template>
  <div class="flex flex-wrap gap-4 items-center">
    <el-select
      :disabled="clickTrue"
      popper-class="custom-popper"
      v-model="cityValueSy"
      placeholder="Select"
      size="small"
      style="width: 100px"
      @change="cityChange"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, watchEffect, defineEmits } from "vue";
const cityValueSy = ref("");
const options = ref();
const clickTrue = ref(false);
const emit = defineEmits(["cityValueChange"]);
// 接收参数
const props = defineProps({
  type: {
    type: Object,
    default: () => {},
  },
  cityName: {
    type: String,
    required: true,
  },
});
clickTrue.value = props.cityName == "辽宁省" ? false : true;

const cityChange = (val: any) => {
  //   获取name
  let data = props.type.options.find((item: any) => item.value == val);
  emit("cityValueChange", { cityValueSy: val, type: props.type.type, name: data.name });
};

const updateChart = () => {
  options.value = props.type.options;
};

watchEffect(() => {
  updateChart();
});
</script>
<style scoped>
.custom-popper .el-select-dropdown__item {
  color: white;
  background-color: rgba(0, 0, 0, 0);
}

.custom-popper .el-select-dropdown__item:hover {
  color: #409eff;
  background-color: #fff;
}

.custom-popper .el-select-dropdown .el-select__placeholder__item.selected {
  color: #409eff !important;
  background-color: #fff;
}
</style>
